<template>
	<div>
		<div v-if="loading">数据加载中...</div>
		<div v-else>
			<van-index-bar>
				<div v-for="(v, i) in result" :key="i">
					<van-index-anchor :index="v.pinyin" />
					<dl v-for="item in v.children" :key="item.info.brand_id" class="dl"
						@click="$router.push('/car/' + item.info.brand_id)">
						<dt>
							<img :src="item.info.image_url" alt="">
						</dt>
						<dd>
							{{ item.info.brand_name }}
						</dd>
					</dl>
					<!-- <van-cell 
						:title="item.info.brand_name" 
						v-for="item in v.children" 
						:key="item.info.brand_id" 
						:icon="item.info.image_url"
					/> -->
					<!-- <span 	v-for="item in v.children" 
						:key="itembrand_id" >{{ item.brand_name }}</span> -->
				</div>
			</van-index-bar>
		</div>
	</div>
</template>


<script lang="ts" setup>
import { fetchSelectCarList } from '@/api';
import { onMounted, ref } from 'vue'

const result = ref<any>()
const loading = ref(true)

const fetchList = async () => {
	const resp = await fetchSelectCarList()
	console.log(resp.data.data)
	loading.value = false

	const arr = [];
	resp.data.data.filter(v => {
		return v.type === '1001'
	}).map(v => {
		const s = arr.find(item => item.pinyin === v.info.pinyin)
		if (s) {
			s.children.push(v)
		} else {
			arr.push({
				pinyin: v.info.pinyin,
				children: [v]
			})
		}
	})

	result.value = arr
}

onMounted(() => {
	fetchList()
})
</script>


<style scoped lang="scss">
.dl {
	display: flex;
	height: 50px;
	align-items: center;
	padding-left: 10px;

	dt {
		height: 100%;

		img {
			height: 80%;
		}
	}

}
</style>